<template>
	<view class="app-view" :style="{backgroundColor: newData.background}">
		<view class="jump dir-left-nowrap main-center cross-center" @click="jump_route()">
			<view class="input main-center"
				:style="{backgroundColor: newData.color, borderRadius: `${newData.radius}rpx`,color: `${newData.textColor}`,boxShadow:newData.shadow}">
				<view class="app-text-search dir-left-nowrap cross-center" :style="{color: `${newData.textColor}`}"
					:class="[`${newData.textPosition === 'center' ? 'main-center' : 'main-left'}`]">
					<view class="app-icon u-iconfont">&#xe600;</view>
					<!-- <text class="text">{{newData.placeholder}}</text> -->
					<text class="text">{{placeholder}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'app-search-for',

		props: {
			value: {
				type: Object,
				default: function() {
					return {
						background: `#efeff4`,
						color: '#ffffff',
						placeholder: '搜索',
						radius: 28,
						textColor: '#999999',
						textPosition: `center`,
						shadow: `none`
					}
				}
			},
			placeholder: {
				type: String,
				default: '搜索'
			},
			mch_id: {
				type: Number,
				default: 0
			},
			mall_id: {
				type: Number,
				default: 1
			},
			// 自定义跳转链接
			isemit: {
				type: Boolean,
				default: false
			},
		},

		data() {
			return {
				newData: this.value
			};
		},
		methods: {
			jump_route() {
				if (this.mall_id == 2) {
					this.$emit('tosearch')
				} else if (this.isemit) {
					this.$emit('tosearch')
				} else {
					let url = '/pages/search/search?mall_id=' + this.mall_id
					if (this.mch_id != 0) {
						url = '/pages/search/search?mch_id=' + this.mch_id + '&mall_id=' + this.mall_id
					}
					uni.navigateTo({
						url: url
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.jump {
		width: 100%;
		height: 100%;
	}

	.app-view {
		height: #{88rpx};
		width: #{750rpx};
		position: relative;
		border-radius: 0;
		border: none;
	}

	.app-text-search {
		z-index: 1000;
		width: #{704rpx};
		height: #{58rpx};
		line-height: #{58rpx};
	}

	.app-text-search .text {
		font-size: #{26rpx};
	}

	.app-icon {
		margin-right: #{12rpx};
		margin-left: #{12rpx};
		width: #{25rpx};
		height: #{25rpx};
		font-size: 28upx;
		//background-size: 100% 100%;
		//background-image: url("../../../static/image/icon/search.png");
	}

	.input {
		height: #{58rpx};
		width: #{704rpx};
		// border: #{1rpx} solid #dcdfe6;
	}
</style>
